<template>
	<div v-show="props.config?.showFlag">
		<div
			class="topApp"
			:style="topPropHoverStyle"
			@mouseenter="props.config.showFlag = true"
			@mouseleave="props.config.showFlag = false"
		>
			<a-space direction="horizontal">
				<a-tooltip title="删除" v-if="iconConfig.showRemoveIcon">
					<DeleteOutlined @click="removeNode" />
				</a-tooltip>
				<a-tooltip title="复制节点" v-if="iconConfig.showCopyNodeIcon">
					<CopyOutlined @click="copyNode" />
				</a-tooltip>

				<a-tooltip title="查看包" v-if="iconConfig.showPackageNodeIcon">
					<Icon @click="viewPackage">
						<template #component>
							<svg
								t="1725268896292"
								class="icon"
								viewBox="0 0 1024 1024"
								version="1.1"
								xmlns="http://www.w3.org/2000/svg"
								p-id="14210"
								width="1em"
								height="1em"
							>
								<path
									d="M510.62784 97.21856c3.91168-0.01024 7.76192 1.03424 11.13088 3.03104l317.27616 176.09728-317.27616 176.09728a21.736448 21.736448 0 0 1-11.13088 3.04128c-4.07552 0.02048-8.0896-1.024-11.64288-3.04128L181.71904 276.34688 498.9952 100.25984c3.54304-2.01728 7.55712-3.072 11.63264-3.04128m0-91.0848c-19.5072 0.06144-38.656 5.12-55.66464 14.67392L84.56192 226.2528c-18.7904 9.8816-30.55616 29.36832-30.55616 50.60608s11.76576 40.71424 30.55616 50.60608l370.41152 204.94336a116.422656 116.422656 0 0 0 111.32928 0L936.20224 326.4512a57.172992 57.172992 0 0 0 30.55616-50.60608 57.16992 57.16992 0 0 0-30.55616-50.59584L566.29248 20.80768a114.345984 114.345984 0 0 0-55.66464-14.67392z m47.06304 759.02976a101.185536 101.185536 0 0 1-97.66912 0L78.4896 547.57376c-21.88288-12.19584-29.78816-39.79264-17.70496-61.72672 12.20608-21.88288 39.79264-29.7984 61.73696-17.7152l361.79968 202.41408a50.59584 50.59584 0 0 0 50.60608 0l365.35296-202.41408a45.056 45.056 0 0 1 34.58048-4.08576 45.03552 45.03552 0 0 1 27.15648 21.80096c12.0832 21.94432 4.16768 49.53088-17.70496 61.72672L557.69088 765.16352z m-93.11232 240.36352L78.4896 788.95104c-21.88288-12.20608-29.78816-39.79264-17.70496-61.73696 12.20608-21.88288 39.79264-29.78816 61.73696-17.70496l366.85824 207.4624a50.577408 50.577408 0 0 0 48.06656 0L899.75808 724.1728c22.2208-11.49952 49.57184-2.90816 61.22496 19.23072 11.50976 22.2208 2.9184 49.5616-19.23072 61.22496l-381.5424 202.40384a101.134336 101.134336 0 0 1-95.63136-1.50528z m0 0"
									fill="#2C2C2C"
									p-id="14211"
								></path>
							</svg>
						</template>
					</Icon>
				</a-tooltip>
				<a-modal
					v-model:open="viewPackageFlag"
					width="100%"
					:mask-closable="false"
					:destroyOnClose="true"
					:footer="null"
					:after-close="disconnect"
					:mask="false"
					:z-index="999"
				>
					<NodeDebugger :lf="props.lf" :nodeId="props.config.id"></NodeDebugger>
				</a-modal>

				<a-tooltip title="暂停" v-if="iconConfig.showPauseNodeIcon">
					<Icon @click="stepPause">
						<template #component>
							<svg
								t="1725578814243"
								class="icon"
								viewBox="0 0 1024 1024"
								version="1.1"
								xmlns="http://www.w3.org/2000/svg"
								p-id="4270"
								width="20"
								height="20"
							>
								<path
									d="M512 853.333333c-187.733333 0-341.333333-153.6-341.333333-341.333333s153.6-341.333333 341.333333-341.333333 341.333333 153.6 341.333333 341.333333-153.6 341.333333-341.333333 341.333333z m0-85.333333c140.8 0 256-115.2 256-256s-115.2-256-256-256-256 115.2-256 256 115.2 256 256 256z m-42.666667-341.333333v170.666666H384v-170.666666h85.333333z m170.666667 0v170.666666h-85.333333v-170.666666h85.333333z"
									fill="#444444"
									p-id="4271"
								></path>
							</svg>
						</template>
					</Icon>
				</a-tooltip>

				<NodeLogDataFlow v-if="props.config?.properties" :properties="props.config?.properties"></NodeLogDataFlow>
			</a-space>
		</div>

		<div
			class="rightApp"
			:style="rightPropHoverStyle"
			@mouseenter="props.config.showFlag = true"
			@mouseleave="props.config.showFlag = false"
		>
			<div class="rightAppAddContainer">
				<a-space direction="vertical">
					<a-tooltip
						v-if="iconConfig.showAddNodeIcon"
						placement="right"
						color="white"
						:overlayInnerStyle="{ width: '500px', maxHeight: '500px', overflowY: 'scroll' }"
					>
						<template #title>
							<span>
								<ComponentCollapse :config="props.componentsViewConfig" :lf="props.lf"></ComponentCollapse>
							</span>
						</template>
						<Icon>
							<template #component>
								<svg
									t="1726447154781"
									class="icon"
									viewBox="0 0 1024 1024"
									version="1.1"
									xmlns="http://www.w3.org/2000/svg"
									p-id="6004"
									width="15"
									height="15"
								>
									<path
										d="M437.333333 85.333333h-320C100.266667 85.333333 85.333333 100.266667 85.333333 117.333333v320c0 17.066667 14.933333 32 32 32h320c17.066667 0 32-14.933333 32-32v-320c0-17.066667-14.933333-32-32-32zM405.333333 405.333333H149.333333V149.333333h256v256zM437.333333 554.666667h-320c-17.066667 0-32 14.933333-32 32v320c0 17.066667 14.933333 32 32 32h320c17.066667 0 32-14.933333 32-32v-320c0-17.066667-14.933333-32-32-32zM405.333333 874.666667H149.333333V618.666667h256v256zM906.666667 554.666667h-320c-17.066667 0-32 14.933333-32 32v320c0 17.066667 14.933333 32 32 32h320c17.066667 0 32-14.933333 32-32v-320c0-17.066667-14.933333-32-32-32zM874.666667 874.666667H618.666667V618.666667h256v256zM586.666667 309.333333h128v128c0 17.066667 14.933333 32 32 32s32-14.933333 32-32v-128h128c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32h-128v-128c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v128h-128c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32z"
										p-id="6005"
									></path>
								</svg>
							</template>
						</Icon>
					</a-tooltip>
				</a-space>
			</div>
		</div>
	</div>
</template>

<script setup>
import ComponentCollapse from '../componentCollapse.vue'
import Icon from '@ant-design/icons-vue'
import NodeDebugger from './nodeDebugger.vue'
import NodeLogDataFlow from './nodeLogDataFlow.vue'
import { AppstoreAddOutlined, DeleteOutlined, CopyOutlined } from '@ant-design/icons-vue'

import processTestApi from '@/api/process/processTestApi'
import { message } from 'ant-design-vue'

const props = defineProps(['config', 'lf','componentsViewConfig'])

const iconConfig = ref({
	showRemoveIcon: false,
	showCopyNodeIcon: false,
	showAddNodeIcon: false,
	showPackageNodeIcon: false,
	showPauseNodeIcon: false
})

const viewPackageFlag = ref(false)

const topPropHoverStyle = ref({
	height: '20px'
})

const rightPropHoverStyle = ref({
	width: '30px'
})

const disconnect = () => {
	// proxy.$refs.objManager.disconnect();
}

const viewPackage = () => {
	viewPackageFlag.value = true
}

const removeNode = () => {
	props.lf.removeNode(props.config.id)
	props.config.showFlag = false
}

const stepPause = async () => {


	let nodeIds = props.lf.getNodeBuffByName('pause')

	let tempNodeIds = []
	for (let nodeId of nodeIds) {
		if (nodeId == props.config.id) {
			continue
		}
		tempNodeIds.push(nodeId)
	}

	if (tempNodeIds.length > 0) {
		message.info('暂停失败，只能暂停一个节点，请先关闭其他节点的暂停状态')
		return
	}

	let bool = props.lf.hasContainsBuffByIdAndName(props.config.id, 'pause')
	if (bool) {
		message.info('取消暂停成功')
		props.lf.removeBuffNameById(props.config.id, 'pause')
	} else {
		const s = await processTestApi.stepPause({
		id: props.lf.id,
		tid: props.lf.tid,
		stepId: props.config.id
	})
		message.info('暂停成功')
		props.lf.addBuffById(props.config.id, 'pause', '暂停中')
	}
}

const copyNode = () => {
	props.lf.copyNode(props.config.id)
}

const showManyIcon = () => {
	const ls = props.lf.getNodeModelById(props.config.id)
	if (!ls) {
		return
	}
	isShowRemoveIcon(ls)
	isShowCopyNodeIcon(ls)
	isShowAddNodeIcon(ls)
	isShowPackageNodeIcon(ls)
	isShowPauseNodeIcon(ls)
}

const isShowPauseNodeIcon = (ls) => {
	iconConfig.value.showPauseNodeIcon = ls.showPauseNodeIcon()
}
const isShowRemoveIcon = (ls) => {
	iconConfig.value.showRemoveIcon = ls.showRemoveIcon()
}

const isShowCopyNodeIcon = (ls) => {
	iconConfig.value.showCopyNodeIcon = ls.showCopyNodeIcon()
}

const isShowAddNodeIcon = (ls) => {
	iconConfig.value.showAddNodeIcon = ls.showAddNodeIcon()
}
const isShowPackageNodeIcon = (ls) => {
	iconConfig.value.showPackageNodeIcon = ls.showPackageNodeIcon()
}
watch(
	() => props.config,
	(newVal, oldVal) => {
		console.log(newVal)
		if (props.config.rect) {
			//顶部工具栏
			topPropHoverStyle.value.top =
				props.config.rect.top - parseInt(topPropHoverStyle.value.height.replace('px', '')) + 'px'
			topPropHoverStyle.value.left = props.config.rect.left + 'px'
			topPropHoverStyle.value.width = props.config.rect.width + 'px'
			//右侧工具栏
			rightPropHoverStyle.value.height = props.config.rect.height + 'px'
			rightPropHoverStyle.value.top = props.config.rect.top + 'px'
			rightPropHoverStyle.value.left = props.config.rect.left + props.config.rect.width + 'px'
		}
		//删除图标
		showManyIcon()
	}
)
</script>

<style scoped lang="less">
.topApp {
	position: fixed;
}
.rightApp {
	position: fixed;
	text-align: center;
}
.rightAppAddContainer {
	position: relative;
	z-index: 9999;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
</style>
